<template>
  <div id="homeLineCharts" :style="{ height: '350px', width: '100%' }" />
</template>

<script setup props="props">
import { ref, onMounted, nextTick } from 'vue';
import * as echarts from 'echarts';

const chartData = ref({
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    boundaryGap: false,
    axisTick: {
      show: false
    }
  },
  grid: {
    left: 10,
    right: 10,
    bottom: 20,
    top: 30,
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
    padding: 8
  },
  yAxis: {
    axisTick: {
      show: false
    }
  },
  legend: {
    data: ['expected', 'actual']
  },
  series: [{

    name: 'expected',
    itemStyle: {
      color: '#FF005A',
      lineStyle: {
        color: '#FF005A',
        width: 2
      }
    },
    smooth: true,
    type: 'line',
    data: [100, 120, 161, 134, 105, 160, 165],
    animationDuration: 2800,
    animationEasing: 'cubicInOut'
  },
  {
    name: 'actual',
    smooth: true,
    type: 'line',
    itemStyle: {
      color: '#3888fa',
      lineStyle: {
        color: '#3888fa',
        width: 2
      },
      areaStyle: {
        color: '#f3f8ff'
      }
    },
    data: [120, 82, 91, 154, 162, 140, 145],
    animationDuration: 2800,
    animationEasing: 'quadraticOut'
  }]
});

onMounted(async () => {
  await nextTick(); // 等待DOM更新完成
  const chartDom = document.getElementById('homeLineCharts');
  const myChart = echarts.init(chartDom);
  myChart.setOption(chartData.value);
});
</script>
